/*
 * @Author: your name
 * @Date: 2021-06-01 15:07:27
 * @LastEditTime: 2021-06-01 21:27:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \遵义d:\HTML001\布局小技巧\3d\3d.js
 */
// 开启一个独立空间,避免全局污染
(function () {
  // 存放li元素
  let liElem,
    timer,
    // 鼠标x y坐标
    oldCoordX,
    oldCoordY,
    nowCoordX,
    nowCoordY,
    // li水平，垂直，纵深方向偏移值
    offsetStepX,
    offsetStepY,
    offsetStepZ,
    // li元素的坐标
    liElemCoordX,
    liElemCoordY,
    liElemCoordZ;

  // 鼠标x y的差值
  (minusX = 0),
    (minusY = 0),
    // X Y的偏移度
    (liElemDegX = 0),
    (liElemDegY = 0),
    // 元素的最大个数
    (liElemMaxNum = 6),
    // li元素水平，垂直，铺放的最大个数
    (liElemRowMaxNum = 5),
    (liElemColMaxNum = 5),
    // li元素水平，垂直纵深方向的最大间距
    (liElemOffsetX = 350),
    (liElemOffsetY = 350),
    (liElemOffsetZ = 350),
    // li元素默认景深
    (liElemDepDefault = -1000),
    // 避免覆盖默认景深值
    // 避免第一次拖动发生错位
    (liElemDepZ = liElemDepDefault),
    // 单个方阵中li元素的总个数
    (aScreenNum = liElemRowMaxNum * liElemColMaxNum),
    // li元素纵深方向的最在间隔距离
    (liElemDepMaxDist = parseInt(liElemMaxNum / aScreenNum)),

    // 计算第一个li元素的坐标点
    liElemFristSiteX = parseInt("-" + liElemRowMaxNum / 2) * liElemOffsetX;
    liElemFristSiteY = parseInt("-" + liElemColMaxNum / 2) * liElemOffsetY;
    liElemFristSiteZ = parseInt("-" + liElemDepMaxDist / 2) * liElemOffsetZ;

  // 指定一个区间，获取一个随机数
  randomFrom = (lowerValue, upperValue) => {
    return Math.floor(
      Math.random() * (upperValue - lowerValue + 1) + lowerValue
    );
  };

  // 方阵
  gridLayout = _ => {
    let arr = [...Array(liElemMaxNum).keys()];
    $("#box li").each(i => {
      // 数组的索引
      let idx = randomFrom(0, arr.length - 1);

      // 计算li元素垂直，水平，纵深偏移位
      offsetStepX = ((i % aScreenNum) % liElemRowMaxNum) * liElemOffsetX;
      offsetStepY =
        parseInt((i % aScreenNum) / liElemColMaxNum) * liElemOffsetY;
      offsetStepZ = parseInt(i / aScreenNum) * liElemOffsetZ;

      // 计算当前li元素的坐标值
      liElemCoordX = liElemFristSiteX + offsetStepX;
      liElemCoordY = liElemFristSiteY + offsetStepY;
      liElemCoordZ = liElemFristSiteZ + offsetStepZ;
      console.log(liElemCoordZ)

      $("#box li").eq(arr[idx]).css({
          "transform": `translate3d(${liElemCoordX}px,${liElemCoordY}px,${liElemCoordZ}px)`,
        });

      // 删除数组中的值
      arr.splice(idx, 1);
    });
  };

  main();

  function main() {
    $([...Array(liElemMaxNum).keys()]).each((i) => {
      // 创建一个li元素
      liElem = $('<li><li>');
      // 将创建好的元素添加到容器中
      $("#box").append(liElem);
    });

    //鼠标移入移出
    $("#box li").hover(
      function () {
        $(this).css("border", "1px solid rgba(125,255,255,0.75)");
        $(this).css("boxShadow", "0 0 15px rgba(0,255,255,0.75)");
        $(this).css("transtion", "0s");
      },
      function () {
        $(this).css("border", "1px solid rgba(125,255,255,0.25)");
        $(this).css("boxShadow", "0 0 15px rgba(0,255,255,0.5)");
        $(this).css("transtion", "0s");
      }
    );

    // 鼠标拖动与滚轮效果
    $(document)
      .mousedown(function (event) {
        event = event || window.event;

        // 上一个点的x，y坐标
        oldCoordX = event.clientX;
        oldCoordY = event.clientY;

        $(this)
          .on("mousemove", (event) => {
            event = event || window.event;
            // 当前x y坐标
            nowCoordX = event.clientX;
            nowCoordY = event.clientY;

            //   计算x y的差值
            minusX = nowCoordX - oldCoordX;
            minusY = nowCoordY - oldCoordY;

            //   更新上一个点的x y的坐标
            oldCoordX = nowCoordX;
            oldCoordY = nowCoordY;

            // 计算x y轴的移动度数
            liElemDegX -= minusY * 0.1;
            liElemDegY += minusX * 0.1;

            $("#box").css({
              transform: `translateZ(${liElemDepZ}px) rotateX(${liElemDegX}deg) rotateY(${liElemDegY}deg)`,
            });
          })
          .mouseup((_) => {
            // 当鼠标弹起解除移动
            $(document).off("mousemove");
            // 若上一个定时器存在，则将其删除
            timer && clearInterval(timer);

            // 当鼠标弹起时有缓动效果
            timer = setInterval((_) => {
              // 缓动差值
              minusX *= 0.95;
              minusY *= 0.95;

              // 计算x y轴的移动度数
              liElemDegX -= minusY * 0.1;
              liElemDegY += minusX * 0.1;

              // 当前差值超出范围，关闭定时器
              Math.abs(minusX) < 0.05 &&
                Math.abs(minusY) < 0.05 &&
                clearInterval(timer);
              $("#box").css({
                transform: `translateZ(${liElemDepZ}px) rotateX(${liElemDegX}deg) rotateY(${liElemDegY}deg)`,
              });
            }, 12);
          });
      })
      .on("mousewheel DOMMouseScroll", (e) => {
        // 获取鼠标滚动方向
        let step =
          (e.originalEvent.wheelDelta &&
            (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||
          (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));

        //   计算滚轮滚动时z轴景深的步长
        liElemDepZ = step*90
        $("#box").css({
          transform: `translateZ(${liElemDepZ}px) rotateX(${liElemDegX}deg) rotateY(${liElemDegY}deg)`,
        });
      });

    // 加载布局
    gridLayout();
  }
})();
